// 获取DOM元素
const input = document.getElementById('input');
const button = document.getElementById('button');
const chatBody = document.getElementById('chatBody');
// 头像组
const userAvatars = [
    '../img/16994892083706312.jpg',
    '../img/16994892092901014.jpg',
    '../img/20220728230053_2bf19.thumb.400_0.jpeg',
    '../img/20230217120759_a33ae.thumb.400_0.jpg',
    '../img/R-C.jpg'
];
const systemAvatars = [
    '../img/16994892083706312.jpg',
    '../img/16994892092901014.jpg',
    '../img/20220728230053_2bf19.thumb.400_0.jpeg',
    '../img/20230217120759_a33ae.thumb.400_0.jpg',
    '../img/R-C.jpg'
];
// 随机选择头像的函数
function getRandomAvatar(avatarArray) {
    const randomIndex = Math.floor(Math.random() * avatarArray.length);
    return avatarArray[randomIndex];
}
// 添加按钮点击事件监听器
button.addEventListener('click', function () {
    // 获取输入内容
    const message = input.value.trim();

    // 如果输入内容为空，则不处理
    if (message === '') {
        return;
    }

    // 获得当前时间并将其格式化
    const now = new Date();
    const hours = String(now.getHours()).padStart(2, '0');
    const minutes = String(now.getMinutes()).padStart(2, '0');
    const seconds = String(now.getSeconds()).padStart(2, '0');
    const time = `${hours}:${minutes}:${seconds}`;

    // 创建一个单独显示时间的区域
    const timeElement = document.createElement('div');
    timeElement.className = 'message-time';
    timeElement.textContent = time;
    chatBody.appendChild(timeElement);

    // 创建用户消息容器
    const userContainer = document.createElement('div');
    userContainer.className = 'message-container user-message-container';

    // 创建用户头像
    const userAvatar = document.createElement('img');
    userAvatar.className = 'message-avatar';
    userAvatar.src = getRandomAvatar(userAvatars);   

    // 创建用户消息元素
    const userMessage = document.createElement('div');
    userMessage.className = 'message user-message';
    userMessage.textContent = message;
    // 将头像和消息添加到容器
    userContainer.appendChild(userAvatar);
    userContainer.appendChild(userMessage);
    chatBody.appendChild(userContainer);
    // 反转消息内容
    const reversedMessage = message.split('').reverse().join('');

    // 创建系统消息容器
    const systemContainer = document.createElement('div');
    systemContainer.className = 'message-container';

    // 创建系统头像
    const systemAvatar = document.createElement('img');
    systemAvatar.className = 'message-avatar';
    systemAvatar.src = getRandomAvatar(systemAvatars); 

    // 创建系统回复消息元素
    const systemMessage = document.createElement('div');
    systemMessage.className = 'message system-message';
    systemMessage.textContent = reversedMessage;
    // 将头像和消息添加到容器
    systemContainer.appendChild(systemAvatar);
    systemContainer.appendChild(systemMessage);
    chatBody.appendChild(systemContainer);
    // 清空输入框
    input.value = '';
    // 滚动到底部
    chatBody.scrollTop = chatBody.scrollHeight;
});
// 加入回车发送消息功能
input.addEventListener('keydown', function (event) {
    if (event.key === 'Enter') {
        button.click();
    }
});